<template>
    <view>
        <!-- 在页面内添加对应的节点 -->
<!-- <van-notify id="van-notify" class="van-hide" /> -->
<view class="content">
	<view class="content-center">
		<view class="image-center">
			<image
				src="http://image.glowworm.club/resourse/%E6%A0%A1%E5%9B%AD%E5%BE%AE%E9%9F%B3%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2.jpg"
				mode="widthFix"></image>
		</view>
	</view>
	<view class="login-btn">
		<view class="padding flex flex-direction login-btn-item">
			<button @click="visitorLogin" class="cu-btn round lg margin-tb-sm visi">
				<text class="cuIcon-cardboardfill  iconText"></text>
				游 客 登 录
			</button>
			<button @click="loginWelink" class="cu-btn round margin-tb-sm bg-green lg" style="background: #008bfc;">
				<img class="weclink-ico iconText" width="15px" height="15px" src="../../static/images/welink.png" alt="">
				<text class="weclink-txt">WeLink登录</text>
			</button>
			<button class="cu-btn round margin-tb-sm lg b1" @click="showModal" data-target="Modal">
				<text class="cuIcon-profile iconText"></text>
				管理员登录
			</button>
			<button class="cu-btn round margin-tb-sm lg b2" @click="showModal" data-target="special">
				<text class="cuIcon-form iconText"></text>
				评 委 入 口
			</button>
			<!-- <u-icon name="photo"></u-icon> -->
		</view>
		<view class="v1"></view>
		<view class="v2"></view>
	</view>
</view>
<!-- ColorUI模态框 -->
<view :class="modalName=='Modal'?'show cu-modal':'cu-modal'">
	<view class="cu-dialog" catchtap>
		<view class="cu-bar bg-white justify-end">
			<view class="content">
				<!-- 登录 -->
			</view>
			<view class="action" @click="hideModal">
				<text class="cuIcon-close text-red"></text>
			</view>
		</view>
		<view class="padding-xl bg-white">
					<u-field v-model="username" label="用户名" placeholder="请输入用户名" ></u-field>
					<u-field type="password" v-model="password" label="密码" placeholder="请输入密码" ></u-field>
			<view class="from-btn">
				<button class="cu-btn round  bg-grey"  @click="hideModal">取消</button>
				<button class="cu-btn round  bg-orange"   @click="userPasswordLogin">确定</button>
			</view>
		</view>
	</view>
</view>
<!-- 评委专用提示框 -->
<view :class="modalName=='special'?'cu-modal show':'cu-modal'" @click="hideModal">
	<view class="cu-dialog" catchtap>
		<view class="cu-bar bg-white justify-end">
			<view class="content" style="font-weight: bold;">评委按钮说明</view>
			<view class="action" bindtap="hideModal">
				<text class="cuIcon-close text-red"></text>
			</view>
		</view>
		<view class="padding-sm bg-white">
			<view class="cu-form-group">
				<view class="title">尊敬的评委老师:</view>
			</view>
			<view class="padding-lg">
				<view class="">
					<view style="text-align: left; text-indent: 2em;">
						由于我们的小程序具有<text>管理员功能</text>,同时对接了 <text style="font-weight: bold;">学校的教务系统</text>.
					</view>
				</view>
				<view class="">
					<view style="text-align: left;text-indent: 2em;">
						为了方便评委们使用和体验小程序,我们设置了评委老师登录按钮的,该入口登录的是具有<text style="font-weight: bold;">管理员身份和认证了学生信息的账号</text>
						.可体验小程序的所有功能,幸苦评委老师~
					</view>
				</view>
			</view>
			<view class="margin-top">
				<button class="cu-btn round  bg-orange" @click="userPasswordLogin">以评委身份登入</button>
			</view>
		</view>
	</view>
</view> 

<!-- <van-dialog id="van-dialog" /> -->
<u-top-tips ref="uTips" navbar-height="0"></u-top-tips>
    </view>
</template>


<script>
import {loginUsingPOST,getWelinkToken,getWelinkUserId,getWelinkUserInfo} from '/common/api/user'
export default {
	data(){
		return{
			password: "op83r5Ws3X2ePHeXkskI2ZKSQS7k",
			username: "1111111111111111111",
			verifyCode: "",
			modalName:null
		}
	},
	created(){
		
	},
	methods:{
		loginWelink(){
			// 获取code
			var code=''
			var taken=''
			var userId=''
			const clientData={
			"client_id": "20210915172019727500178",
			"client_secret": "7fb508b9-2144-4064-9fbd-b35e2cafdb04"
			}
			//获取code
			HWH5.getAuthCode().then(data => {
				code=data.code
				//获取token
				getWelinkToken(clientData).then(res=>{
					taken=res.data.access_token
					wx.setStorageSync("welinkToken", taken)
					// 获取用户id
					getWelinkUserId({'code':code}).then(res=>{
						userId=res.data.userId
						// console.log(userId)
						wx.setStorageSync("userId", userId)
						// // 获取用户信息
						// getWelinkUserInfo({'userId':userId}).then(res=>{
						// 	this.$store.commit('changeState', {
						// 		key:'welinkUserInfo', 
						// 		value:res.data
						// 	})
							uni.navigateTo({
								url: "/pages/my/index" 
							});
						// }).catch(error=>{
						// 	this.$refs.uTips.show({
						// 		title: error.data.message,
						// 		type: 'error',
						// 	});
						// })
					})
				})
			}).catch(error => {
				console.log('获取异常', error);
			});
			// 获取welink登录token
			
			
		},
		getWxUserInfo(){
			wx.getUserProfile({
			desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			success: (res) => {
				console.log("XXXXXXXXXXXXXXXX")
				console.log(res)
				}
			})
		},
		visitorLogin() {
			wx.clearStorageSync()
			this.$store.commit('changeState', {
				key:'userInfo', 
				value:{}
			})
			uni.navigateTo({
        	url: "/pages/my/index"
			});
		},
		showModal(e) {
			// console.log(e.currentTarget.dataset)
		this.modalName=e.currentTarget.dataset.target
		
	},
		hideModal(){
			this.modalName=null
		},
			// 密码登录
		userPasswordLogin() {

		// Notify({
		// 	type: 'success',
		// 	message: "操作失败"
		// });
		// utils.wxShowLoadingtUtil("正在登录中")
		// 		wx.showLoading({
		//     title: '正在登录中',
		//     mask: true,
		//   });
		const userPasswordLogin = {
			username:'',
			password:'',
			verifyCode:''
		}
		userPasswordLogin.username = this.username
		userPasswordLogin.password = this.password
		loginUsingPOST(userPasswordLogin, null)
			.then(res => {
				// wx.hideLoading();
				if (res.data.code == 200) {
					let token = res.data.data.Authorization
					wx.setStorageSync("token", token)
					uni.navigateTo({
						url: "/pages/my/index" 
					});
				// 	app.globalData.token = token
				// 	this.getUserInfo(token)
					// console.log(res,'kk')
					}
					this.$refs.uTips.show({
						title: res.data.message == null ? "操作失败" : res.data.message,
						type: res.data.code == 200 ? 'success' : 'error',
					});
				})
		},
	}
}
</script>

<style lang="scss" scoped>
.content {
  height: 90vh;
  width: 100vw;
}
.content-center {
  text-align: center;
  margin-bottom: 30rpx;
}
.content-center .title {
  font-size: 30rpx;
  margin-bottom: 30rpx;
}
.content-center .image-center {
  display: flex;
}
.content-center .image-center image {
  width: 100%;
}
.login-btn {
  bottom: -50rpx;
  left: 100rpx;
  right: 0;
  position: absolute;
  width: 550rpx;
  border: 2rpx solid #273dad;
  border-radius: 50rpx;
  background-color: rgba(205, 213, 250, 0.7);
}
.login-btn text {
  margin-right: 30rpx;
}
.login-btn .visi {
  color: #f2f2ff;
  background-color: #3e6bad;
}
.login-btn .v1,
.login-btn .v2 {
  height: 80%;
  width: 100rpx;
  position: absolute;
  top: 10%;
  border: 2rpx solid #273dad;
  border-radius: 30rpx;
  background-color: rgba(205, 213, 250, 0.7);
}
.login-btn .v1 {
  left: -160rpx;
}
.login-btn .v2 {
  right: -160rpx;
}
.login-btn .b1,
.login-btn .b2 {
  color: #ffffff;
}
.login-btn .b1 {
  background-color: #9c9ca6;
}
.login-btn .b2 {
  background-color: #eeb84c;
}
.from-btn {
  display: flex;
  justify-content: flex-end;
}
.from-btn button {
  margin-top: 35rpx;
  margin-right: 30rpx;
}
.van-hide {
  z-index: 999;
}
.cu-modal .cu-dialog .bg-white .btn button {
  flex: 1;
}
.login-btn .weclink-ico{
margin-left: 40rpx;
}
.login-btn .weclink-txt{
	box-sizing: border-box;
	margin-left: 30rpx;
}
</style>